Exercises

Compose Tweet

In older versions of Twitter, a number showed you how many characters you had left to use in your message:

Screenshot of the old Twitter UI, showing 130 characters left after the user has written 10 characters

In the playground below, we've recreated this UI, but our implementation isn't as nice as it could be. Your job is to refactor this code, to improve it.

Acceptance Criteria:

The number of characters remaining should be derived from the messages state, not stored in a state variable.
No effects should be used.
- Bonus question: Can you think of any reasons why an effect is not the right tool for this problem?

Code Playground

import React from 'react';

import VisuallyHidden from './VisuallyHidden';

import styles from './ComposeTweet.module.css';

function ComposeTweet({ maxChars, handleSubmit }) {

const [message, setMessage] = React.useState('');

const [charsRemaining, setCharsRemaining] =

React.useState(maxChars);

const id = React.useId();

React.useEffect(() => {

setCharsRemaining(maxChars - message.length);

}, [maxChars, message]);

return (

<form

className={styles.wrapper}

onSubmit={(event) => {

event.preventDefault();

handleSubmit(message);

setMessage('');

}}

<label htmlFor={id}>Compose Tweet:</label>

<span

className={styles.count}

style={{

color: getCharacterColor(

charsRemaining

}}

Characters remaining:{' '}

</VisuallyHidden>

{charsRemaining}

</span>

</div>

<textarea

id={id}

className={styles.textarea}

placeholder="What's happening?"

required={true}

value={message}

onChange={(event) => {

setMessage(event.target.value);

}}

</button>

</div>

</form>

);

}

function getCharacterColor(charsRemaining) {

if (charsRemaining < 0) {

return 'hsl(0deg 100% 50%)';

Solution:

Solution code (success)

import React from 'react';

import VisuallyHidden from './VisuallyHidden';
import styles from './ComposeTweet.module.css';

function ComposeTweet({ maxChars, handleSubmit }) {
  const [message, setMessage] = React.useState('');
  const id = React.useId();

  const charsRemaining = maxChars - message.length;

  return (
    <form
      className={styles.wrapper}
      onSubmit={(event) => {
        event.preventDefault();
        handleSubmit(message);
        setMessage('');
      }}
    >
      <div className={styles.header}>
        <label htmlFor={id}>Compose Tweet:</label>
        <span
          className={styles.count}
          style={{ color: getCharacterColor(charsRemaining) }}
        >
          <VisuallyHidden>Characters remaining: </VisuallyHidden>
          {charsRemaining}
        </span>
      </div>

      <textarea
        id={id}
        className={styles.textarea}
        placeholder="What's happening?"
        required={true}
        value={message}
        onChange={(event) => {
          setMessage(event.target.value);
        }}
      />

      <div className={styles.footer}>
        <button
          className={styles.tweetBtn}
          onClick={(ev) => {
            ev.preventDefault();
            setMessage('');
          }}
        >
          Clear
        </button>
        <button className={styles.tweetBtn}>Tweet</button>
      </div>
    </form>
  );
}

function getCharacterColor(charsRemaining) {
  if (charsRemaining < 0) {
    return 'hsl(0deg 100% 50%)';
  } else if (charsRemaining < 15) {
    return 'hsl(30deg 80% 40%)';
  } else {
    return 'black';
  }
}

export default ComposeTweet;

The useEffect hook is not the right solution here for two reasons:

It makes the code more complicated than it has to be.
It triggers a double render. Every time the message state variable changes, React re-renders the entire component, then it runs the effect, then it re-renders it again. We're doing 2x more work than we have to.

Checkout flow

In this exercise, we're working with a checkout flow. The “shopping cart” we saw back in Module 1 now includes some info underneath about the price.

Unfortunately, this code has a pretty big bug: removing an item from the cart doesn't update the subtotal/tax/total values!

Your mission is to fix this bug.

Acceptance Criteria:

The numbers at the bottom of the page (Subtotal / Taxes / Total) should recalculate when removing an item from the cart.
You should remove any state variables that aren't necessary. Derive state whenever possible.

Code Playground

import React from 'react';

import { roundTo } from './utils';

import CartTable from './CartTable';

function CheckoutFlow({ items, taxRate, handleDeleteItem }) {

const [subtotal, setSubtotal] = React.useState(() => calculateSubtotal(items));

const [taxes, setTaxes] = React.useState(subtotal * taxRate);

const [total, setTotal] = React.useState(subtotal + taxes);

return (

<h1>Checkout</h1>

<tbody>

<tr>

<th scope="col">Subtotal</th>

<td>${roundTo(subtotal, 2)}</td>

</tr>

<tr>

<th scope="col">Taxes</th>

<td>${roundTo(taxes, 2)}</td>

</tr>

<tr>

<th scope="col">Total</th>

<td>${roundTo(total, 2)}</td>

</tr>

</tbody>

</table>

</>

)

}

function calculateSubtotal(items) {

let subtotal = 0;

items.forEach(item => {

subtotal += item.price;

});

return subtotal;

}

export default CheckoutFlow;

Solution:

Solution code (success)

import React from 'react';

import { roundTo } from './utils';
import CartTable from './CartTable';

function CheckoutFlow({
  items,
  taxRate,
  handleDeleteItem,
}) {
  const subtotal = calculateSubtotal(items);
  const taxes = subtotal * taxRate;
  const total = subtotal + taxes;

  return (
    <>
      <h1>Checkout</h1>

      <CartTable
        items={items}
        handleDeleteItem={handleDeleteItem}
      />

      <table className="checkout-totals">
        <tbody>
          <tr>
            <th scope="col">Subtotal</th>
            <td>${roundTo(subtotal, 2)}</td>
          </tr>
          <tr>
            <th scope="col">Taxes</th>
            <td>${roundTo(taxes, 2)}</td>
          </tr>
          <tr>
            <th scope="col">Total</th>
            <td>${roundTo(total, 2)}</td>
          </tr>
        </tbody>
      </table>
    </>
  );
}

function calculateSubtotal(items) {
  let subtotal = 0;

  items.forEach((item) => {
    subtotal += item.price;
  });

  return subtotal;
}

export default CheckoutFlow;

Thermostat

Below, you'll find a thermostat that lets us set the temperature. We can also switch between Celsius and Fahrenheit modes for displaying the current temperature.

With the current code, we're storing two state variables, one for the celsius value, and one for the fahrenheit value.

Your task is to simplify this code by having a single state variable that holds information about the temperature (as well as a 2nd state variable for the displayed format).

This is a surprisingly tricky challenge. I thought this would be pretty straightforward, and I struggled to come up with a solution I was 100% happy with. Please don't be discouraged if you can't solve this one!

Acceptance Criteria:

A single state variable should be used to keep track of the thermostat's current temperature.
The and buttons should increase/decrease the current temperature by 1 degree.
- Note: It doesn't matter what the current mode is. Whether we're in “celsius” mode or “fahrenheit” mode, these buttons should increase/decrease the displayed temperature by 1 (eg. from 77°F to 78°F, or from 25°C to 26°C).
You can use the helper functions convertToCelsius and convertToFahrenheit to convert between units.

Code Playground

import React from 'react';

import { ChevronUp, ChevronDown } from 'react-feather';

import {

convertToCelsius,

convertToFahrenheit

} from './utils';

import ToggleButton from './ToggleButton';

import VisuallyHidden from './VisuallyHidden';

import styles from './Thermostat.module.css';

function Thermostat() {

const [celsius, setCelsius] = React.useState(25);

const [fahrenheit, setFahrenheit] = React.useState(77);

const [mode, setMode] = React.useState('celsius');

React.useEffect(() => {

const nextFahrenheit = convertToFahrenheit(celsius);

setFahrenheit(nextFahrenheit);

}, [celsius]);

const displayedValue = mode === 'celsius' ? celsius : fahrenheit;

function toggleMode() {

const nextMode = mode === 'celsius' ? 'fahrenheit' : 'celsius';

setMode(nextMode);

}

function incrementTemperature() {

setCelsius(celsius + 1);

}

function decrementTemperature() {

setCelsius(celsius - 1);

}

return (

Sugarfine

</div>

{displayedValue}°

</div>

<ToggleButton

label="Mode"

options={[

{

label: 'C',

value: 'celsius',

{

label: 'F',

value: 'fahrenheit',

]}

selectedValue={mode}

onChange={toggleMode}

<button

className={styles.iconButton}

onClick={decrementTemperature}

Solution:

Solution code (success)

import React from 'react';
import { ChevronUp, ChevronDown } from 'react-feather';

import { convertToCelsius, convertToFahrenheit } from './utils';
import ToggleButton from './ToggleButton';
import VisuallyHidden from './VisuallyHidden';
import styles from './Thermostat.module.css';

function Thermostat() {
  const [temperature, setTemperature] = React.useState(25);

  const [mode, setMode] = React.useState('celsius');

  function toggleMode() {
    const nextMode =
      mode === 'celsius'
        ? 'fahrenheit'
        : 'celsius';
    setMode(nextMode);

    const nextTemperature = Math.round(
      nextMode === 'celsius'
        ? convertToCelsius(temperature)
        : convertToFahrenheit(temperature)
    );

    setTemperature(nextTemperature);
  }

  function incrementTemperature() {
    setTemperature(temperature + 1);
  }
  function decrementTemperature() {
    setTemperature(temperature - 1);
  }

  return (
    <div className={styles.wrapper}>
      <div className={styles.logo}>Sugarfine</div>
      <div className={styles.digitalScreen}>
        {temperature}°
      </div>
      <div className={styles.controls}>
        <ToggleButton
          label="Mode"
          options={[
            {
              label: 'C',
              value: 'celsius',
            },
            {
              label: 'F',
              value: 'fahrenheit',
            },
          ]}
          selectedValue={mode}
          onChange={toggleMode}
        />
        <div className={styles.tempAdjustButtons}>
          <button
            className={styles.iconButton}
            onClick={decrementTemperature}
          >
            <ChevronDown size={32} />
            <VisuallyHidden>
              Decrease temperature
            </VisuallyHidden>
          </button>
          <button
            className={styles.iconButton}
            onClick={incrementTemperature}
          >
            <ChevronUp size={32} />
            <VisuallyHidden>
              Increase temperature
            </VisuallyHidden>
          </button>
        </div>
      </div>
    </div>
  );
}

export default Thermostat;

Moving by half-degrees in Celsius (info)

As we've learned, changing the Celsius temperature by 1 degree is equivalent to changing the Fahrenheit temperature by 1.8 degrees.

This means that for folks who use Celsius, they effectively have less control over the temperature. Each press of the button changes the temperature by almost 2 degrees Fahrenheit!

I live in Canada, and most of our thermostats are in celsius. They generally let us go up/down in 0.5° increments:

I didn't want to go too far down this rabbit hole, but if you want even more of a challenge, you can update the solution to allow the temperature to be adjusted by 0.5 degrees while in Celsius.

There's a roundToNearest method in utils that can help, by letting you round a value to the nearest 0.5:

roundToNearest(12.34, 0.5); // 12.5
roundToNearest(10.9, 0.5); // 11

Here's what my updated solution looks like:

import React from 'react';
import { ChevronUp, ChevronDown } from 'react-feather';

import {
  convertToCelsius,
  convertToFahrenheit,
  roundToNearest,
} from './utils';
import ToggleButton from './ToggleButton';
import VisuallyHidden from './VisuallyHidden';
import styles from './Thermostat.module.css';

function Thermostat() {
  const [temperature, setTemperature] =
    React.useState(25);

  const [mode, setMode] =
    React.useState('celsius');

  function toggleMode() {
    const nextMode =
      mode === 'celsius'
        ? 'fahrenheit'
        : 'celsius';
    setMode(nextMode);

    const nextTemperature = roundToNearest(
      nextMode === 'celsius'
        ? convertToCelsius(temperature)
        : convertToFahrenheit(temperature),
      nextMode === 'celsius' ? 0.5 : 1
    );

    setTemperature(nextTemperature);
  }

  function incrementTemperature() {
    setTemperature(
      mode === 'celsius'
        ? temperature + 0.5
        : temperature + 1
    );
  }

  function decrementTemperature() {
    setTemperature(
      mode === 'celsius'
        ? temperature - 0.5
        : temperature - 1
    );
  }

  return (
    <div className={styles.wrapper}>
      <div className={styles.logo}>Sugarfine</div>
      <div className={styles.digitalScreen}>
        {temperature}°
      </div>
      <div className={styles.controls}>
        <ToggleButton
          label="Mode"
          options={[
            {
              label: 'C',
              value: 'celsius',
            },
            {
              label: 'F',
              value: 'fahrenheit',
            },
          ]}
          selectedValue={mode}
          onChange={toggleMode}
        />
        <div className={styles.tempAdjustButtons}>
          <button
            className={styles.iconButton}
            onClick={decrementTemperature}
          >
            <ChevronDown size={32} />
            <VisuallyHidden>
              Decrease temperature
            </VisuallyHidden>
          </button>
          <button
            className={styles.iconButton}
            onClick={incrementTemperature}
          >
            <ChevronUp size={32} />
            <VisuallyHidden>
              Increase temperature
            </VisuallyHidden>
          </button>
        </div>
      </div>
    </div>
  );
}

export default Thermostat;